<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 材质分类对比展示</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Three.js 材质分类对比展示</h1>
            <p>在相同光源条件下对比不同材质的视觉效果</p>
        </header>
        
        <div class="main-content">
            <div class="controls-panel">
                <div class="control-section">
                    <h3>材质分类</h3>
                    <div class="material-categories">
                        <div class="category-item">
                            <input type="checkbox" id="basic-materials" checked>
                            <label for="basic-materials">基础材质</label>
                            <div class="material-list">
                                <span>MeshBasicMaterial</span>
                                <span>MeshLambertMaterial</span>
                                <span>MeshPhongMaterial</span>
                            </div>
                        </div>
                        <div class="category-item">
                            <input type="checkbox" id="pbr-materials" checked>
                            <label for="pbr-materials">PBR材质</label>
                            <div class="material-list">
                                <span>MeshStandardMaterial</span>
                                <span>MeshPhysicalMaterial</span>
                            </div>
                        </div>
                        <div class="category-item">
                            <input type="checkbox" id="special-materials" checked>
                            <label for="special-materials">特殊材质</label>
                            <div class="material-list">
                                <span>MeshToonMaterial</span>
                                <span>MeshNormalMaterial</span>
                                <span>MeshDepthMaterial</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="control-section">
                    <h3>光源控制</h3>
                    <div class="light-controls">
                        <div class="control-item">
                            <label for="ambient-intensity">环境光强度</label>
                            <input type="range" id="ambient-intensity" min="0" max="1" step="0.05" value="0.3">
                            <span class="value">0.3</span>
                        </div>
                        <div class="control-item">
                            <label for="directional-intensity">方向光强度</label>
                            <input type="range" id="directional-intensity" min="0" max="4" step="0.1" value="2.5">
                            <span class="value">2.5</span>
                        </div>
                        <div class="control-item">
                            <label for="directional-x">平行光 X 位置</label>
                            <input type="range" id="directional-x" min="-30" max="30" step="1" value="15">
                            <span class="value">15</span>
                        </div>
                        <div class="control-item">
                            <label for="directional-y">平行光 Y 位置</label>
                            <input type="range" id="directional-y" min="5" max="50" step="1" value="25">
                            <span class="value">25</span>
                        </div>
                        <div class="control-item">
                            <label for="directional-z">平行光 Z 位置</label>
                            <input type="range" id="directional-z" min="-30" max="30" step="1" value="15">
                            <span class="value">15</span>
                        </div>
                        <div class="control-item">
                            <label for="show-light-helper">显示光源辅助器</label>
                            <input type="checkbox" id="show-light-helper">
                        </div>
                    </div>
                </div>
                
                <div class="control-section">
                    <h3>材质属性</h3>
                    <div class="material-properties">
                        <div class="control-item">
                            <label for="material-color">基础颜色</label>
                            <input type="color" id="material-color" value="#ffffff">
                        </div>
                        <div class="control-item">
                            <label for="opacity">透明度</label>
                            <input type="range" id="opacity" min="0" max="1" step="0.01" value="1">
                            <span class="value">1.00</span>
                        </div>
                        <div class="control-item">
                            <label for="wireframe">线框模式</label>
                            <input type="checkbox" id="wireframe">
                        </div>
                        <div class="control-item">
                            <label for="auto-rotate">自动旋转</label>
                            <input type="checkbox" id="auto-rotate" checked>
                        </div>
                    </div>
                </div>
                
                <div class="control-section">
                    <h3>视图控制</h3>
                    <div class="view-controls">
                        <button id="reset-camera">重置相机</button>
                        <button id="toggle-helpers">切换辅助线</button>
                        <button id="screenshot">截图保存</button>
                    </div>
                </div>
            </div>
            
            <div class="viewport">
                <canvas id="three-canvas"></canvas>
                <div class="material-info">
                    <div class="info-panel">
                        <h4>材质信息</h4>
                        <div id="material-details">
                            <p>将鼠标悬停在材质球体上查看详细信息</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="comparison-table">
            <h3>材质特性对比表</h3>
            <table>
                <thead>
                    <tr>
                        <th>材质类型</th>
                        <th>光照响应</th>
                        <th>阴影支持</th>
                        <th>性能消耗</th>
                        <th>适用场景</th>
                        <th>特殊属性</th>
                        <th>实物举例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>MeshBasicMaterial</td>
                        <td>无</td>
                        <td>否</td>
                        <td>极低</td>
                        <td>UI元素、发光物体</td>
                        <td>不受光照影响</td>
                        <td>LED屏幕、霓虹灯、发光标识牌</td>
                    </tr>
                    <tr>
                        <td>MeshLambertMaterial</td>
                        <td>漫反射</td>
                        <td>是</td>
                        <td>低</td>
                        <td>粗糙表面、布料</td>
                        <td>朗伯反射模型</td>
                        <td>棉布、纸张、粗糙石材、哑光墙面</td>
                    </tr>
                    <tr>
                        <td>MeshPhongMaterial</td>
                        <td>漫反射+镜面反射</td>
                        <td>是</td>
                        <td>中</td>
                        <td>光滑表面、塑料</td>
                        <td>支持高光</td>
                        <td>塑料玩具、陶瓷、光滑石材、亮面家具</td>
                    </tr>
                    <tr>
                        <td>MeshStandardMaterial</td>
                        <td>PBR</td>
                        <td>是</td>
                        <td>高</td>
                        <td>真实感渲染</td>
                        <td>金属度、粗糙度</td>
                        <td>金属制品、皮革、木材、混凝土</td>
                    </tr>
                    <tr>
                        <td>MeshPhysicalMaterial</td>
                        <td>高级PBR</td>
                        <td>是</td>
                        <td>很高</td>
                        <td>高质量渲染</td>
                        <td>清漆层、透射</td>
                        <td>汽车漆面、高档家具、珠宝、玻璃制品</td>
                    </tr>
                    <tr>
                        <td>MeshToonMaterial</td>
                        <td>卡通化</td>
                        <td>是</td>
                        <td>中</td>
                        <td>卡通风格</td>
                        <td>非真实感渲染</td>
                        <td>动画角色、游戏道具、卡通玩具</td>
                    </tr>
                    <tr>
                        <td>MeshNormalMaterial</td>
                        <td>无</td>
                        <td>否</td>
                        <td>低</td>
                        <td>调试、法线可视化</td>
                        <td>显示法线方向</td>
                        <td>3D建模调试、法线贴图预览</td>
                    </tr>
                    <tr>
                        <td>MeshDepthMaterial</td>
                        <td>无</td>
                        <td>否</td>
                        <td>低</td>
                        <td>深度可视化</td>
                        <td>显示深度信息</td>
                        <td>深度图生成、景深效果、雾化效果</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <script src="main.js"></script>
</body>
</html>